<template>
	<view>
		<view class="search-input">
			<uni-icons type="search" size="16"></uni-icons>
			<input type="text" v-model="searchWords" placeholder="输入搜索内容" class="ml-20" style="font-size: 24rpx;" />
			<view class="font-24 mr-20" @click="search">搜索</view>
		</view>

		<view class="pt-20 pb-20 pl-40 pr-40 flex" :style="{position: 'sticky', top: '0rpx'}">
			<view class="mr-40 text-center" @click="setIndex(0)">
				<view :class="[selectIndex === 0 ? 'list-select' : '']" style="width: 68rpx;">零活</view>
				<view class="list-bord mt-10" v-if="selectIndex === 0"></view>
			</view>
			<view class="mr-40 text-center" @click="setIndex(1)">
				<view :class="[selectIndex === 1 ? 'list-select' : '']" style="width: 68rpx;">零工</view>
				<view class="list-bord mt-10" v-if="selectIndex === 1"></view>
			</view>
		</view>

		<view class="pl-30 pr-30 pt-30" v-for="(item, index) in obbLists" :key="index"
			@click="$goRoute.goUrl('/pages/job_work/form?id='+item.id)">
			<view class="bg-white pl-30 pr-30 pt-20 pb-20 border-radius">
				<view class="flex space-between">
					<view>{{item.title}}</view>
					<view class="font-blue">编辑</view>
				</view>
				<view class="font-no-wrap2 mt-20 font-24 font-grey">{{item.info}}</view>
			</view>
		</view>

		<view class="text-center mt-200" v-if="selectIndex === 0 && obbLists.length === 0">暂无零活信息...</view>
		<view class="text-center mt-200" v-if="selectIndex === 1 && obbLists.length === 0">暂无零工信息...</view>

		<view class="right-button" @click="$goRoute.goUrl('/pages/job_work/form')">
			<uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {
		listByUser as obbList
	} from '../../api/obb.js'
	export default {
		data() {
			return {
				selectIndex: 0,
				searchWords: '',
				pageNo: 1,
				pageSize: 10,
				obbLists: [],
				searchWords: ''
			};
		},
		onShow() {
			this.getObbList()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '河口人才招聘小程序',
				path: '/pages/job_work/job_work'
			}
		},
		onReachBottom() {
			this.getObbList()
		},
		methods: {
			getObbList() {
				uni.showLoading({
					title: '加载中'
				})
				obbList({
					pageNo: this.pageNo,
					pageSize: 10,
					title: this.searchWords,
					type: this.selectIndex
				}).then(res => {
					if (this.pageNo === 1) {
						this.obbLists = res.result.records
					} else {
						this.obbLists.push(...res.result.records)
					}
					this.pageNo += 1
					uni.hideLoading()
				})
			},
			setIndex(index) {
				this.selectIndex = index
				this.search()
			},
			search() {
				this.pageNo = 1
				this.getObbList()
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.search-input {
		background-color: rgba(255, 255, 255, .8);
		height: 30px;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		padding: 10rpx 30rpx;
		width: 84vw;
		margin: auto;

		input {
			width: 80%;
		}
	}

	.list-bord {
		background: linear-gradient(270deg, #75FFED 0%, #46B4B1 100%);
		width: 68rpx;
		height: 8rpx;
	}

	.list-select {
		color: #46B4B1;
	}

	.right-button {
		background-color: #46B4B1;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		right: 40rpx;
		bottom: 200rpx;
	}
</style>